<template>
    <swiper
        :modules="modules"
        :navigation="true"
        :pagination="{clickable: true}"
        :autoplay="autoplayOptions"
        :loop="true"
    >
        <swiper-slide v-for="carousel in list" :key="carousel.id">
            <img :src="carousel.imgUrl" />
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Navigation, Pagination, Autoplay} from 'swiper'
import 'swiper/swiper.min.css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

defineProps(['list'])

//前进后退  分页器  自动播放
const modules = [Navigation, Pagination, Autoplay]
//自动播放的配置
const autoplayOptions = {
    delay: 1000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true
}
</script>

<style scoped lang="less"></style>
